<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>提交表单</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../component/elementUI/index.css">
  <link rel="stylesheet" href="dataFlow/submitForm.css">
</head>

<body>
  <div id="app" v-cloak>
    <el-form :model="form" ref="contract" inline-message="true" style="width: 100%">
      <el-row :gutter="10">
        <!-- <el-col :xs="24" :span="16">
          <div class="table_titel">
            <div class="titel">提交申请</div>
          </div>
          <el-descriptions :column="isWindow?1:2" border size="small">
            <el-descriptions-item label="系统名称">
              <el-form-item prop="System_Name">
                <el-input v-model.trim="form.System_Name" placeholder="请输入系统名称"></el-input>
              </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item label="说明备注">
              <el-form-item prop="System_Remark">
                <el-input v-model.trim="form.System_Name" placeholder="请输入系统名称"></el-input>
              </el-form-item>
            </el-descriptions-item>
          </el-descriptions>
        </el-col> -->
        <el-col :xs="24" :span="8">
          <div class="table_titel">
            <div class="titel">审批流程</div>
          </div>
          <div style="width: 100%;margin-bottom: 50px;">
            <el-timeline>
              <el-timeline-item v-for="(item, index) in data.filter(i=>i.Current_Node_Approver_Type!='0')" :key="index"
                color="#909399" :icon="icon(item.Current_Node_Approver_Type)" size="large">
                <div style="padding-bottom: 10px; display: flex;">{{item.Node_name}}
                  <div v-if="item.userlist.length>1 && isMark(item)" style="display: flex; align-items: center; justify-content: center; width: 30px;
                    border: 1px solid #409EFF; border-radius: 3px; margin-left: 10px;">
                    <span style="font-size: 12px; color:#409EFF; ">{{mark(item.examineMode)}}</span>
                  </div>
                </div>
                <div style="display: flex; flex-wrap: wrap;">
                  <div v-for="(ite,ind) in item.userlist" :key="ind" style="display: flex; align-items: center;">
                    <span style="border-radius: 3px; background-color: #ebebeb; margin-bottom: 5px;
                        height: 40px; display: inline-block;">
                      <div style="display: flex; align-items: center; height: 100%;">
                        <img style="display: inline; margin-left: 5px; width: 30px; height: 30px;"
                          src="dataFlow/image/icon_people.png">
                        <span style="margin: 0 5px; font-size: 12px;">{{ite.name}}</span>
                        <img @click="Delete(item,ite)" v-show="item.settype =='2'&&item.Current_Node_Approver_Type!= '2'"
                          style="display: inline; margin-right: 5px;" src="dataFlow/image/add-close1.png">
                      </div>
                    </span>
                    <div style="margin-left: 5px;">
                      <i v-show="item.examineMode=='3'" class="el-icon-right" style="margin-right: 5px;"></i>
                    </div>
                  </div>
                  <div v-show="item.settype=='2'&&isAdd(item)" @click="Add(item)"
                    style="border-radius: 3px; border: 1px solid #c0ccda; background-color: #fbfdff;  box-sizing: border-box;
                    margin-bottom: 5px;  cursor: pointer; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
                    <i class="el-icon-plus" style="font-size: 18px;"></i>
                  </div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-col>
      </el-row>
      <el-form-item class="form-operation">
        <el-button :style="isWindow?'width: 300px;':''" type="primary" :loading="loading"
          @click="submitForm('contract')">提交</el-button>
      </el-form-item>
    </el-form>
    <el-dialog title="选择审批人员" :fullscreen="isWindow" :visible.sync="visibleDialog" append-to-body>
      <div :style="isWindow?'':'min-height: 400px;'">
        <div v-for="(item,index) in nodeUserList" @click="Select(item)" :key="index" style="display: flex; align-items: center; justify-content: space-between;
          padding: 5px 0; margin-bottom: 5px; background-color: #e0e0e0;">
          <div style="display: flex; align-items: center;">
            <img style="display: inline; margin-left: 5px; width: 30px; height: 30px;" src="dataFlow/image/icon_people.png">
            <span style="margin-left: 10px;">{{item.name}}</span>
          </div>
          <span style="margin-right: 5px; position: relative;">
            <el-checkbox v-model="item.check"></el-checkbox>
            <span style="width: 100%;height: 100%; z-index: 999; position: absolute; top: 0; left: 0;"></span>
          </span>
        </div>
      </div>
    </el-dialog>
  </div>
  <script type="text/javascript" src="../../../utils/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
  <script type="text/javascript" src="../../../utils/vue.min.js"></script>
  <script type="text/javascript" src="../../../component/elementUI/index.js"></script>
  <script type="text/javascript" src="../../../utils/utils.js"></script>
  <script type="text/javascript" src="../../../utils/ID_Validity.js"></script>
  <script type="text/javascript" src="js/SubmitForm.js"></script>
</body>

</html>